﻿@model GPS.Models.UserDetails

@{
    ViewBag.Title = "View1";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/PicStyle.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/MyCSS/MainPage.css")">

}

<div class="nav-main">
    <div class="layout">
        <nav class="naver">
            <ul id="naver-list">
                <li id="huawei1" class="" >
                    <a href="http://www.baidu.com"><span>联想专区</span></a>
                </li>
                <li id="huawei2" class="" >
                   <a href="http://www.baidu.com" ><span>华为专区111</span></a>
                </li>
                <li id="huawei3" class="" >
                    <a href="http://www.baidu.com"><span>小米专区</span></a>
                </li>
                <li id="huawei4" class="" >
                    <a href="http://www.baidu.com"><span>OPPO专区</span></a>
                </li>                
            </ul>
            <div class="list-category">
                <div id="a1" style="display:none">
                    aaaaaa
                </div>
                <div id="a2">
                    bbbbbb
                </div>
            </div>
        </nav>

    </div>
</div>

<script type="text/javascript">
    $("#naver-list a").hover(function () {
        $(this).addClass("hover");
        var IdValue = $(this).parent().eq(0).attr("id");
        var listCatagWidth = $("div #" + IdValue).width();
        $("div .list-category").css("width", listCatagWidth);
        
        $("div .list-category").css("left", $(this).parent().eq(0).position().left);
        $("div .list-category").css("display", "block");
    }, function () {
        $(this).removeClass("hover");
        $("div .list-category").css("display", "none");
    });
</script>

<br /><br /><br /><br />
<div>
    @using (Html.BeginForm("TestSubmit", "Test", FormMethod.Post))
    {
        @Html.TextBoxFor(x => x.UserName)
        @Html.Encode(@Html.TextBoxFor(x => x.UserName))
        @Html.TextBoxFor(c => c.PassWord)

        <br />

        <input type="submit" name="BtnSubmit" value="Login" />
        <input type="submit" name="BtnSubmit" value="Logout" />
    }
</div>

<h3>This is heading 1</h3>


<form action="/Test/upload" method="post" enctype="multipart/form-data">
    Select File : <input type="file" name="ImgUpload" value="" onchange="GetFileSize(this)" />
    <input type="submit" name="name" value="Upload" accept="image/*" />
</form>
<br /><br /><br /><br /><br /><br /><br />

@using (Html.BeginForm("Upload", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="DIV_picField">
        <div onclick='btnAction(this)' class='UploadPicPlus' style='position:relative;display:inline-block;height:100px;width:100px;background-image:url(../../Content/upImg/IMGEmpty.png);'>
            <input type="file" name="ImgUpload" style='position:absolute;bottom:2px;display:none;' onchange="FileSelected(this)" />
        </div>
    </div>
    <input type="submit" value="picUp" name="myPicUp" />
}


<br /><br /><br /><br /><br /><br /><br />
<div class="nav-main">

</div>
@*http://www.w3cplus.com/css3/css-scroll-snap-points.html*@
<div class="rollBox" id="rbox">
    <a href="###">前端工具</a> <a href="###">Android</a>  <a href="###">插件使用</a>  <a href="###">git</a>  <a href="###">smarty</a> <a href="###">面试</a>  <a href="###">linux</a> <a href="###">h5</a> <a href="###">app</a>> <a href="###">node</a><a href="###">部署</a>  <a href="###">移动页面</a>
</div>

<div class="gallery"> 
    <img src=@Url.Content("~/Content/upImg/1.png")> 
    <img src=@Url.Content("~/Content/upImg/2.png")> 
    <img src=@Url.Content("~/Content/upImg/3.png")> 
    <img src=@Url.Content("~/Content/upImg/4.png")> 
</div>

<input type="button" name="mybtn" value="aaaaaaaaa" onclick="mybtn()" />
<script type="text/javascript">
    function mybtn() {
        $(".gallery").animate({scrollLeft:(300)},100);
    }

    </script>






    <script type="text/javascript">
        var PicCount = 1;
    function btnAction(obj) {
        $(obj).children("input")[0].click(this);
        PicCount++;
    }
    function btnDel(obj) {
        $(obj).parent().remove();
    }
    function FileSelected(obj) {       //文件选择后的相应函数
        //先获取一个文件
        var UpIMG = obj.files[0];
        //把删除字样加到DIV右上角
        $(obj).parent("div.UploadPicPlus").append("<span style='position:absolute; right:2px;font-size:20px;cursor:pointer;' onclick='btnDel(this)'>删除</span>");
        //改变DIV的背景，使得看起来是一张图片
        $(obj).parent("div.UploadPicPlus").css("background-image", "url(" + window.URL.createObjectURL(UpIMG) + ")");
        //去除DIV的onclick事件
        $(obj).parent("div.UploadPicPlus").removeAttr("onclick");
        //再加一个 图片输入框到刚才那个旁边
        $("#DIV_picField").append("<div onclick='btnAction(this)' class='UploadPicPlus' style='border-color:#ff0000;border-style:solid;border-width:0 20px;position:relative;display:inline-block;height:100px;width:100px;background-image:url(../../Content/upImg/IMGEmpty.png);'>"
            + "<input name='ImgUpload' style='position:absolute;bottom:2px;display:none;'  type='file' onchange='FileSelected(this)' /></div>");
    }



    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }


    function GetFileSize(obj) {
        var photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
        alert(photoExt);
        var fileSize = 0;
        var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
        if (isIE && !obj.files) {
            var filePath = obj.value;
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            var file = fileSystem.GetFile(filePath);
            fileSize = file.Size;
        } else {
            fileSize = obj.files[0].size;
        }
        fileSize = Math.round(fileSize / 1024 * 100) / 100; //单位为KB
        alert(fileSize);

    }

</script>


    